<template>
  <div class="search-range">
    <div class="title">搜素范围</div>
    <div class="search-range-wrap-content" v-for="(item, index) in menu" :key="'search-range_menu_' + index">
      <span> {{ item.title }}</span>
      <el-switch v-model="item.isSelected" @change="changeRange"></el-switch>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { ElSwitch } from "element-plus";
import { useData } from "@table/hooks/useData";
import { useSearch } from "@table/hooks/useSearch";
const { originalTableColumns, searchOptions } = useData();
type MenuItem = {
  title: string;
  isSelected?: boolean;
  key: string;
};

const menu = ref<MenuItem[]>([]);
const { save } = useSearch();

const changeRange = () => {
  searchOptions.value.keywordRange = menu.value.filter(item => item.isSelected).map(item => item.key);
  save();
};

onMounted(() => {
  menu.value = originalTableColumns.value
    .filter(item => item.isSearch)
    .map(item => {
      return {
        title: item.title,
        key: item.key,
        isSelected: searchOptions.value?.keywordRange?.includes(item.key)
      };
    });
});
</script>
<style lang="scss" scoped>
.search-range {
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  width: 240px;
  padding: 12px 0;
  background: #ffffff;
  border-radius: 0.25rem;
  box-shadow: 0 0 16px #00000014;
  &-wrap-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 22px;
    padding: 6px 20px;
    font-size: 14px;
    line-height: 22px;
    color: #333333;
    cursor: pointer;
    &:hover {
      background: #f5f5f5;
    }
  }
  .hidden {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.5;
    &:hover {
      background: #ffffff;
    }
  }
  .line {
    width: 100%;
    height: 1px;
    margin: 4px 0;
    background: #eeeeee;
  }
  .title {
    padding: 2px 20px;
    margin: 5px 0 10px;
    font-size: 14px;
    color: #cacaca;
  }
}
</style>
